<template lang="html">
  <div class="">
    <!-- 自定义组件-->
    <RadioTitle  title="电台"/>

    <div class="container">
        <div class="box">
            <!-- <div class="feilei">
                <router-link to="/radiolist/radioclasses" tag="span">电台分类</router-link>
            </div> -->
            <router-link class="feilei" to="/radiolist/radioclasses" tag="div">
                <span>电台分类</span>
            </router-link>
            <router-link class="paihang" to="/radio/radiolist" tag="div">
                <span>电台排行</span>
            </router-link>
        </div>
        <div class="card" >
            <div class="card-slider">
                <div class="poster">
                    <img src="../../assets/images/radio-pic1.png" alt="">
                </div>
            </div>
            <div class="info">
                <div class="name">跨界也是很疯狂</div>
            </div>
        </div>
        <div class="card" >
            <div class="card-slider">
                <div class="poster">
                    <img src="../../assets/images/radio-pic2.png" alt="">
                </div>
            </div>
            <div class="info">
                <div class="name">你向往的地方在哪</div>
            </div>
        </div>
    </div>

    <div class="mod-tj">
        <div class="hd">推荐观看</div>
        <!-- 自定义组件 -->
        <RecommendSee dataUrl="RecommendSee.json"/>
    </div>
  </div>
</template>

<script>
import RadioTitle from "../../components/radioTitle"
import RecommendSee from "./recomendSee"
export default {
  name:"radio",
  data(){
    return{

    }
  },
  components:{
    RadioTitle,
    RecommendSee
  }
}
</script>

<style scoped>

.container{
  clear: both;
  overflow: hidden;
  background-color: #fff;
}
.container .box{
  clear: both;
  overflow: hidden;
  height:0.9rem;
}
.container .box div{
  float: left;
  width: 50%;
  text-align: center;
}
.feilei span{
  display: inline-block;
  margin: 0.32rem 0 0 .6rem;
}
.paihang span{
  display: inline-block;
  margin: 0.32rem 0 0 0.2rem;
}
.container .card{
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px 20px;
}
.poster img{
  width:3.7rem;
  height: 2.2rem;
}
.mod-tj{
    background: #fff;
    overflow: hidden;
    padding: 0rem 0rem;
}
.hd {
    display: block;
    font-weight: 700;
    font-size: 0.4rem;
    margin-top:0.14rem;
}
 .hd {
    margin: .14rem 0  .18rem 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
</style>
